
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 450px;
      height: 450px;
      border: 1px solid #aaa;
      position: relative;
      top: 200px;
      left: 200px;
    }

    .small {
      width: 450px;
      height: 450px;
      position: absolute;
    }

    .mask {
      position: absolute;
      background-color: rgba(255, 255, 0, .3);
      width: 225px;
      height: 225px;
      top: 0;
      left: 0;
      display: none;
    }

    .big {
      width: 450px;
      height: 450px;
      border: 1px solid #aaa;
      position: absolute;
      left: 500px;
      top: 0;
      overflow: hidden;
      display: none;
    }

    .big>img {
      width: 900px;
      height: 900px;
      position: absolute;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="small">
      <img src="./images/s.jpg" alt="">
      <div class="mask"></div>
    </div>
    <div class="big">
      <img src="./images/big.jpg" alt="">
    </div>
  </div>
</body>
<script>
/*
  放大镜：
    效果1和效果2

1.获取元素(box,遮罩，放大用的盒子)

2.给box注册鼠标移入和移出事件

3.控制遮罩和放大盒子显示和隐藏

效果3
1.获取元素(small)

2.注册鼠标的移动事件(mousemove)

3.根据鼠标的位置计算出遮罩应该在位置，设置给遮罩

4.根据鼠标的位置计算出大图应该在的位置，设置给大图


*/

// 1 获取元素
var box = document.querySelector('.box');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
var small = document.querySelector('.small');
//2 注册鼠标的移入和移出事件
box.onmouseover = function(){
  // 3 控制遮罩和放大的盒子显示
  mask.style.display = 'block';
  big.style.display = 'block';
}
box.onmouseout = function(){
  // 3 控制遮罩和放大的盒子隐藏
  mask.style.display = 'none';
  big.style.display = 'none';
}

// 效果3.1 鼠标移动的时候，移动遮罩
small.onmousemove = function(e){
  // 4 根据鼠标的位置，计算出遮罩应该在哪个位置
  var mx = e.pageX;
  var my = e.pageY;
  // 5 遮罩的位置 = 鼠标位置 - box的位置 - 遮罩宽高的一半
  var x = mx - box.offsetLeft - mask.offsetWidth / 2;
  var y = my - box.offsetTop - mask.offsetHeight / 2;
  // 6 不让遮罩超出边界
  // if(x < 0) {
  //   x = 0;
  // }
  // if(y < 0 ){
  //   y = 0;
  // }
  x = x < 0 ? 0 : x;
  y = y < 0 ? 0 : y;

  // 算出mask移动的最大距离
  var maxX = small.offsetWidth - mask.offsetWidth;
  var maxY = small.offsetHeight - mask.offsetHeight;
  // 如果超过了最大距离，强行拉回来
  // if(x > maxX){
  //   x = maxX;
  // }
  // if(y > maxY){
  //   y = maxY;
  // }
  x = x > maxX ? maxX : x;
  y = y > maxY ? maxY : y;

  // 7 设置给mask
  mask.style.top = y + 'px';
  mask.style.left = x + 'px';
}

</script>

</html>